<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ColumNav example: handler order</title>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container_core-min.js"></script>
    <script type="text/javascript" src="../js/carousel_min.js"></script>
    <script type="text/javascript" src="../js/columnav_min.js"></script>
    <link href="../css/examples.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
      try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
      function reset() {
          var out = document.getElementById('out');
          out.innerHTML = '';
      }
      function report(type, args, me) {
          var out = document.getElementById('out');
          var span = document.createElement('span');
          var text = 'event fired: ' + type;
          var text = document.createTextNode(text);
          span.appendChild(text);
          out.appendChild(span);
      }
      function init() {
          var cn_cfg = {
              prevElement: 'columnav-prev',
              datasource: document.getElementById('handlers'),
              prevHandler: report,
              nextHandler: report,
              requestHandler: report,
              responseHandler: report,
              paneHandler: report,
              animationCompleteHandler: report,
              prevButtonStateHandler: report
          };
          var cn = new YAHOO.extension.ColumNav('columnav', cn_cfg);

          var sv_cfg = { url: location.href, modifier: 'HTML' };
          var sv = new YAHOO.extension.SourceViewer('source', sv_cfg);
      }
      YAHOO.util.Event.addListener(window, 'load', init);
    </script>
    <script type="text/javascript" src="../js/viewsource.js"></script>
    <link href="../css/stringify.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
      #out span { display: block; }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="content">
        <p style="float:right"><a href="../">Documentation</a></p>
        <h1>ColumNav</h1>
        <h2>Example</h2>
        <div class="prevButton">
          <a href="javascript:void(0)" id="columnav-prev">&lt; back</a>
        </div>
        <div id="columnav" class="carousel-component">
          <div class="carousel-clip-region">
            <ul class="carousel-list"></ul>
          </div>
        </div>
        <div class="viewsource" id="source"></div>
        <p>The ColumNav above is initialized from the list below. While interacting with the ColumNav, the output at the bottom of the page updates to show the various events that are fired. Each event can be assigned a handler via its corresponding configuration property. For example, the <code>onNext</code> event can be handled by assigning a function to the <code>nextHandler</code> configuration property. See the <a href="../">documentation</a> for descriptions of each handler.</p>
        <ul id="handlers">
          <li><a href="ajax/xml/ncaa/index.xml" rel="ajax">NCAA</a></li>
        </ul>
        <a href="#" onclick="reset();return false">clear</a>
        <div id="out"></div>
      </div>
    </div>
  </body>
</html>
